<template>
	<div>
		<!--轮播图区域-->
		<!-- <mt-swipe :auto="3000">
		  <mt-swipe-item v-for="item in lunbotuList" :key="item.url">
			<img :src="item.url">
		  </mt-swipe-item> 
		</mt-swipe> -->
		<swipers :lunbotuList="lunbotuList" :isfull="true"></swipers>

		<!--九宫格 到 六宫格-->
		 <ul class="mui-table-view mui-grid-view mui-grid-9">
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newslist">
	                    <img src="../../images/menu1.png">
	                    <div class="mui-media-body">新闻资讯807</div></router-link></li>

	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photolist">
	                     <img src="../../images/menu2.png">
	                    <div class="mui-media-body">图片分享</div></router-link></li> 

	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/goodslist">
	                     <img src="../../images/menu3.png">
	                    <div class="mui-media-body">商品购买</div></router-link></li>

	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
	                    <img src="../../images/menu4.png">
	                    <div class="mui-media-body">留言反馈</div></a></li>

	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
	                   <img src="../../images/menu5.png">
	                    <div class="mui-media-body">视频专区</div></a></li>

	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
	                    <img src="../../images/menu6.png">
	                    <div class="mui-media-body">联系我们</div></a></li>  
	        </ul> 
	</div>
</template>
<script>
import { Toast } from 'mint-ui'
import swiper from '../subcomponents/swiper.vue'
export default{
	data(){
		return{
			lunbotuList:[] //保存轮播图的数组
		};
	},
	created(){
		this.getLunbotu();
	},
	methods:{
		getLunbotu(){  //获取轮播图数据的方法  
			this.$http.get('lunbo.php').then(result =>{
				//console.log(result.body);
				if(result.body.code === 0){
					//成功
					this.lunbotuList = result.body.data;
				}else{
					//失败
					Toast('加载轮播图失败');
				}
			});
		}
	},
	components:{
		"swipers" : swiper
	}
} 
</script>
<style lang="scss" scoped>

	.mui-table-view.mui-grid-view.mui-grid-9{
		background-color:#fff;
		border:none;
		img{
			width:60px;
			height:60px;
		}
		.mui-media-body{
			font-size:13px;
		}
	}
	.mui-grid-view.mui-grid-9 .mui-table-view-cell{
		border:none;
	}
</style>